/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */


/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 16px;
    line-height: 1.4;
    font-family: "Adelle", Arial, Helvetica, sans-serif;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1rem 0;
    padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
* {
    box-sizing: border-box;
}
main {
    position: relative;
    z-index: 1;
}
header, #header {
    position: relative;
    display: block;
    z-index: 3;
}
#page_mask {
    position: absolute;
    display: block;
    margin-top: -1rem;
    padding-top: 4rem;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    z-index: 2;
}
.main_section {
 display: block;   
  position: relative;
    z-index: 3;
}
#selection-section {
    z-index: 1;
}
#mask-inner {
    display: block;
    margin: 3rem auto;
    box-sizing: border-box;
    padding: 3rem 2rem;
    width: 90%;
    max-width: 700px;
    background-color: #eeeeec;
}

#social-login {
    /*display: block;*/
    margin: 2rem auto;
    width: 100%;
}
.social-button {
    display: inline-block;
    margin: 1rem 1.5rem;
    text-align: center;
}
.social-button,
.social-button a {
    color: #888;
}
.social-button:before {
    display: block;
    margin: 0 0 0.8rem;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    background: 50% 50% no-repeat;
    background-size: cover;
}
#facebookSignin:before {
    background-image: url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7bb47fbe6c-b01e-4701-94e8-45b195972e53%7d_social-facebook.png);
}
#login-twitter:before {
    background-image: url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7b8f3efbaa-48b2-4097-892f-d6cd7c7b3d2a%7d_social-twitter.png);
}
#login-linkedin:before {
    background-image: url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7b1535f438-0ef2-4598-8cf9-f2d7492a1327%7d_social-linkedin.png);
    cursor: pointer;
	content: '';
}


/* Eloqua API targeting */
#facebookSignin {
    color: #888;
    margin: 1rem 1.5rem;
}

#facebookSignin a {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    overflow: hidden;
    background-image: url('http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7bb47fbe6c-b01e-4701-94e8-45b195972e53%7d_social-facebook.png');
    background-position: center;
}


#facebookSignin img {
    display: none;
}

#social-or {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 1rem 0;
    z-index: 2;
    width: 100%;
    max-width: 500px;
    text-align: center;
}
#social-or:before {
    content: '';
    position: absolute;
    top: 2.2rem;
    left: 0;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #fff;
    z-index: -1;
}
#social-or:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4rem;
    margin-top: -2rem;
    width: 4rem;
    margin-left: -2rem;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #eeeeec;
    z-index: -1;
}

#form890 {
    display: block;
    margin: 0 auto;
    max-width: 500px;
    padding: 0;
}
#form890 input {
    border: 1px solid #c2c2c2;
    box-shadow: none;
    border-radius: 0;

}
#social-submit {
    margin-top: 2.5rem;
}


@media (max-width:500px) {
    #mask-inner {
        padding: 2rem 1rem;
    }
    .social-button {
        margin: 1rem 0.7rem;
    }
    
}





.accordion_btn {
    position: relative;
    /*cursor: pointer;*/
    margin-left: 4px;
    margin-right: 4px;
    padding: .5em .5em .5em .7em;
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    text-align: left;
    display: none;
    color: #999;
}

.accordion_enabled {
    cursor: pointer;
    color: #000;
}

.expand_btn {
    position: absolute;
    display: inline;
    right: 12px;
    top: 0px;
    font-size: 26px;
}

/* HEADER COPY */
#header_copy, #header_copy2{
    /*width:30%;*/
    min-width: 250px;
    color:#ffffff;
    text-align:left;
    position: relative;
    padding: 0px !important;
    display: block;
    /*margin: 1.4rem auto 0 1.5rem;*/
    margin-top: 1.4rem;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: 2rem;
    font-family: "Adelle", Arial, Helvetica, sans-serif;
    font-weight: 100;
}
h1.header_tagline{
    padding-bottom:1rem !important;
    font-family: "Adelle", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size:18px;
}
#header_copy2{
/*#header_copy{*/
    display: none;
}

#header_copy{
    width:30%;
}
#header_copy2{
    width:42%;
}

#header.active {
    background: #fff !important;
    height: 5rem !important;
}
#header.active #logo {
    margin-top: 1.5rem;
}
#header.active #phoneNumber,
#header.active #liveChat {
margin-top: -0.8rem;
}



/* PRODUCT IMAGE */
#product_container{
 position: relative;
  display: block;
  text-align: center;


}
#product_img {
    max-width:600px; 
    /*width:600px; */
    /*height:342px;*/
    /*
    max-width:100%; 
    max-height:100%;
    */
    margin:auto;

    /*margin: auto 30%;*/
    display:block;
}

@media (max-width: 1200px) {    
    #product_img {
        margin: auto 25%;
    }
}

#product_img > .inner {
    padding: 1rem 0;    
}

.centerdiv {
  display: inline-block;
}

/* SHRINK */
.shrink {
/*    -webkit-transition: all 10s linear;
    -moz-transition: all 10s linear;
    -o-transition: all 10s linear;
    transition: all 10s linear;*/
    padding: 0 !important;
}
.shrink img {
    width:0;
    height:0;
/*    animation: shrink_down 3s;
    animation-iteration-count: 1;*/
}

/*@keyframes shrink_down {
  0% {
    width: 124px;
  }
  100% {
    width: 0px;
  }
}*/



/* HIGHLIGHTS */

.hilite_green{

    border-bottom:5px solid #00ff00;
}

.hilite_red{
    color:#ff0000;
    /*
    border-bottom:5px solid #ff0000;
    */
}

.hilite_blue{

    border-bottom:1px solid #0000cc;
}
/*BREADCRUMBS STYLING */

#breadcrumbs_divider{
    width:20%;
    margin-top: -4px;
}
#identify_button{
    float:left;
    width:170px;
    margin-top: -14px;      
    font-size: 16px;
    line-height: 2.4;

}

#seehow_button{
    width:170px;
    float:right;
    margin-top: -14px;  
    font-size: 16px;
    line-height: 2.4;
}

#arrow_right_separator {
    margin-top: -.7rem !important;
}

#demo-button {
    position: absolute;
    display: inline;
    right: 88px;
    top: 0px;
    /*padding: 0.2em 1.4em 0.2em 1.4em;*/
}

#demo-button2 {
    display: none;
}
#demo-button2.reveal {
    display: inline;
}

#visit_sage_button {
    display: inline;
    margin: 1rem 0 1.3rem;
}

#header_copy2 a {
    text-decoration: none;
}

#refresh-page {
    margin-left: 20px;
    text-decoration: underline;   
    cursor: pointer;
    display: inline-block;
}

#text_instructions, #text_instructions2, #text_instructions3, #text_instructions4, #text_instructions5, #text_instructions6 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#text_instructions2, #text_instructions3, #text_instructions4  {
    display: none;
}

#text_instructions3, #text_instructions5  {
    font-size: 20px;
    color: #000;
}
#text_instructions6  {    
    max-width:600px; 
}
#text_instructions7  {
    font-size: 24px;
    color: #000;
}

#logo_salesforce1, #logo_sage, #logo_salesforce1  {
    display: inline-block;
}

#logo_salesforce1  {
    width: 190px;
}
.salesforce_logo {
    display: inline-block;
    height: 50px;
    width: auto;
}
@media(max-width:850px) {
    .salesforce_logo {
        display: block;
        margin: 0 auto;
        height: 50px;
        width: auto;
    }
}
#logo_sage  {
    margin: 2rem 4rem;
}

#disclaimer p {
    color: #000;
}


/*APP Column styling*/

.borderline{
    width:100%;
    height:0px;
    border:.5px solid #ffffff;
}

.approw{
    margin-bottom: 20px;
}

.appcol_left{
    height:85px;
    float:left;
    width: 120px;
    border-right:1px solid #ffffff;
    padding-right:20px;
    padding-top:8px;
    margin-top: 8px;
    display: table;
    text-align:center;
}

.appcol_left > .appcol_content{
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    /* height:20px; */
}

.appcol_right{
    /*
	margin-left: 200px;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    */

    padding-left: 100px;
    padding: 8px;
    display: block;
    /*display: table;*/
    text-align:left;
}

.appcol_right > .appcol_content{
    /*text-align:left;*/
    /*display: table-cell;*/
    vertical-align:middle;
    /* height:20px; */
}

.applogos {
    /*display: table-cell;*/
    display: inline-block;
    /* padding: 8px; */
    padding-left:8px;
    padding-right:8px;
    padding-top:0px;
    padding-bottom:8px;
    vertical-align: middle;
    border: 1px solid black;
    border: none;

    cursor:pointer;
    /*
    display: block;
    padding: 8px;
    background-color: #dddddd;
    */
    /*transition: 0.4s all 0s;*/

/*    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;*/
    /*transition: all 1s linear;*/
    /*transition: opacity 0.4s linear;*/
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.applogos img {    
    /*transition: width 2s linear,  height 2s linear;*/
    /*transition: 0.4s all 0s;*/
/*    width: 108px;
    height:74px; */
    /*transition: width 10s;*/
}

.border_gray {
    border: 1px solid #999;
    width: 100%;
}
.border_blue {
    border: 1px solid #00a4cf;  
    width: 100%;   
}
.border_green {
    border: 1px solid #00ff00; 
    width: 100%;  
}


/* error messaging */
#error_message{


    color:#ff0000;

}



/*SAGE X3 Fonts - 'Adelle' */


html {
    font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: "Adelle", Arial, Helvetica, sans-serif;
    font-weight: 100;
    color: #51534a;
    letter-spacing: -0.5px;
}

h1 {
    font-size: 10em;
    line-height: 1em;
    padding: 4rem 0;
    /*padding: 7rem 0;*/
    /*max-width: 90%;*/
    font-weight: 700;
    /*letter-spacing: -1px;*/
}

h1 span {
    display: block;
    /*        margin-top: 0.2em;*/
    color: #fff;
    /*font-weight: 700; */
    font-size: 2.1rem;
    line-height: 1.2em;
    letter-spacing: -1.2px;
}

@media (max-width: 550px) {
    h1 {
        font-size: 3.3em;
    }
}

h2 {
    font-size: 1.9em;
}

h3 {
    font-size: 1.4em;
    line-height: 1.3em;
    text-align: center;
}

h4 {
    font-size: 1.3em;
    padding: 0;
    margin: 0;
}

p {
    text-align: center;
    letter-spacing: normal;
}

p span {
    display: block;
    font-weight: bold;
}

@media(max-width: 900px) {
    p span {
        display: inline;
    }
}

@media(max-width: 950px) {
    #demo-button {
        display: none;
    }
}

/*styling for mobile*/
@media(max-width: 480px) {
    #demo-button {
        position: relative;
        display: block; 
        right: 0px; 
        top: 10px;
        padding-right: 0;
        padding-left: 0;
    }
    .accordion_btn {
        display: block;
    }
    .appcol_left, .appcol_right, #product_img, #demo-button, #arrow_right_separator, #seehow_button, #reset_apps {
        display: none;
    }
    #product_container_section, #selection-section {
        padding: 0;
    }
/*    .appcol_left, .appcol_right, #product_container_section, #demo-button, #arrow_right_separator, #seehow_button, #reset_apps {
        display: none;
    }*/
    .borderline {
        border: .5px solid #eeeeec;
    }
    header {
        background: none !important;
        height: 120px;
        background-color: #2e3456 !important;
    }
    header > .inner, #logo_blurb {
        display: none;
        position: fixed;
    }
    #header {
        height: 120px !important;
    }
    #header.active {
        background: #2e3456 !important;
    }
    #phoneNumber {
        margin-top: 2.6rem;
        margin-right: 1rem;
    }
    
    
    
    #logo {
        width: 126px !important;
        margin-left: -63px !important;
        /*margin-top: -16px !important;*/
        position: absolute !important;
        top: 50%;
        left: 50%;
    }
    #identify_button, #seehow_button {
        margin: 0 auto;
        float: none;
    }
    #identify_button.hide_in_mobile {
        display: none;
    }
    #seehow_button.hide_in_mobile {
        display: none !important;
    }
    #reset_apps.hide_in_mobile {
        display: none !important;
    }
    .hilite_green {
        border: none;
    }    
    #selection-section {
        background-color:#fff !important; 
    }
    .icon {
        border: 2px solid #eeeeec;
    }
    #text_instructions, #text_instructions2, #text_instructions3, #text_instructions4, #selection-section {
        padding-top: 0 !important;
    }
    #content-instruct {
        width: auto !important;
    }
    #submit_apps {
        float: none !important;
    }
    #phoneNumber {
        top: 0px !important;
        right: 0px !important;
    }
}

@media(min-width: 481px) {
    #table_accounting, #table_banking, #table_payroll, #table_crm, #table_payments, #table_timesheets, #table_expenses, #table_vendor_mgt, #table_document_mgt, #table_inventory {
        display: block !important;
    }
}

@media(max-width: 800px) {
    #header.active #phoneNumber {
        margin-top: 0;
    }
    #phoneNumber span {
        display: none;
    }
    #phoneNumber {
        background: url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7b3a92fbbc-b94f-4b68-a96b-b97798ae5962%7d_phone-icon.png) no-repeat 50% 50%;
        width: 28px;
        height: 34px;
        padding-top: 0 !important;
    }
    #liveChat {
        /*text-align: right;
        top: 0.4rem;
        right: 0;*/
        display: none;
    }
}

#selection-section {
    background-color:#eeeeec; 
    padding-top: 1rem;
}


p.form-toggle {
    margin-top: 0;
    padding-top: 0;
    font-size: 1.1rem;
    overflow: hidden;
    height: 1em;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

p.form-toggle span {
    display: inline;
    font-weight: normal;
    color: #f0125d;
    cursor: pointer;
}

p.form-toggle span:hover,
p.form-toggle span:focus {
    color: #c82e61;
    text-decoration: underline;
}

p.form-toggle {
    margin-top: 0;
    padding-top: 0;
    font-size: 1.1rem;
}

p.form-toggle span {
    display: inline;
    font-weight: normal;
    color: #f0125d;
    cursor: pointer;
}

p.form-toggle span:hover,
p.form-toggle span:focus {
    color: #c82e61;
    text-decoration: underline;
}

a:hover,
a:focus {
    text-decoration: underline;
}

main {
    width: 100%;
    padding: 0;
    margin: 0;
}


/* header */

header {
    width: 100%;
    /*max-height: 500px;*/
    background: url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7b0fbb3887-53a3-4f4d-a318-0f9ab8885711%7d_header_background.jpg) no-repeat 50% 50%;
    background-size: cover;
    text-align: center;
}

header > .inner {
    /*padding: 1rem 0;    */
    padding-top: 4rem;
    padding-right: 0px;
    padding-bottom: 1rem;
    padding-left: 0px;
    max-width: 1200px;    
    margin: 0 auto;
    position: relative;
}

#header {
    -webkit-transition: 0.25s all 0s;
    transition: 0.25s all 0s;
}
#header {
    position: fixed;
    /*top: 0;*/
    /*left: 0;*/
    height: 8rem;
    width: 100%;
    /*max-width: 1200px;*/
    /*left: 50%;*/
    /*transform: translate(-50%, 0);    */
    /*margin: 0 auto;*/
    /*text-align: center;*/
    z-index: 10;
}
#header .button {
    position: absolute;
    right: 1.5rem;
    top: 0.25rem;
}
#header.active {
    background: rgba(255,255,255,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#header.active #phoneNumber {
    color: #333;
}
#header.active #liveChat {
    color: #333;
}
#header.active #liveChat:after {
    content: url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7b1f2257a3-7b70-4d53-8d11-1de55c546f7a%7d_chat-arrow_grey.png);
}
#header_holder {
    position: relative;
    max-width: 1200px;
    left: 50%;
    transform: translate(-50%, 0);   
}

#logo {
    position: relative;
    padding: 0px !important;
    display: block;
    margin: 3rem auto 2rem;
    width: 300px;
    height: 54px;
}

#header #logo {    
    background:transparent url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7bb7c02f64-b0b8-47a0-a0e1-5624183b7c57%7d_sage_live_logo.png) left top no-repeat;
}

@media(min-width: 480px) {
    #header.active #logo {    
        background:transparent url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7bb99bd9b4-9bf6-4d58-aedf-7e51553dbf61%7d_sage_live_logo_grey_small.png) left top no-repeat;
    }
}

#logo_blurb {
    width: 150px;
    height: 54px;
    float: right;
    /*color: #fff;*/
    text-align: right;
    font-size: 18px;
    letter-spacing: -1px;
    line-height: 56px;
    /*border-left: 1px solid #ffffff;*/
    margin-top: -11px;
}
#header #logo_blurb {
    color: #fff;
    border-left: 1px solid #fff;
}

#header.active #logo_blurb {
    color: #333;    
    border-left: 1px solid #333;
}

/*#liveChat {
    right: 70px;
    text-align: left;
    color: #fff;
    padding: 1em 1.4em;
    position: absolute;
    display: inline-block;
}*/

/*#liveChat,*/
#phoneNumber {
    /*width: 200px;*/
    right: 20px;
    top: -10px;    
    /*right: 200px;*/
    /*text-align: left;*/
    color: #fff;
    padding: 1em 1.4em;
    position: absolute;
    display: inline-block;
    letter-spacing: 0em;
}

/*#phoneNumber {
    top: 19px;    
    letter-spacing: 0em;

}*/

#liveChat{
    /*position: absolute;*/
/*    padding: 1em 2.7em 1rem 1.5rem;*/
    /*line-height: 1.2em;    */
    /*width: 200px;*/
    right: 20px;
    top: 12px;
    /*right: 200px;*/
    /*text-align: left;*/
    color: #fff;
    padding: 1em 1.4em;
    position: absolute;
    /*display: inline-block;*/
}
#liveChat:after{
    content: url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7bffd5a3db-bd84-41ad-991e-8e618d340abc%7d_button-arrow.png);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.5rem;
    margin-bottom: -1px;
}

/*
@media (max-width:767px) {
    h1 {
        padding-top: 4rem;
    }
}
*/

@media (max-width:767px) {
    #header {
        position: absolute;
    }
    /*#header {
        height: 4rem;
    }*/
    /*#logo {*/
        /*margin-top: 1rem;*/
    /*}*/
    #header .button {
        display: none;
    }
    /*#phoneNumber {*/
        /*position: relative;*/
        /*display: block;*/
        /*text-align: left;*/
        /*right: 0px;*/
        /*top: 7px;*/
        /*margin-left: 5.6rem;*/
    /*}*/
}

.contentWidth {
    display: block;
    margin: 0 auto;
    width: 80%;
    max-width: 820px;
    font-size: 13px;
}

#content-instruct {
    padding-bottom:0px; 
    width:400px
}

section {
    width: 100%;
    /*max-width: 1200px;*/
    padding: 3rem 0;
    text-align: center;    
    margin: 0px auto;
}

section > * {
    padding: 1rem 0;
}

/*#section_bottom {
    width: 100%;
    padding: 3rem 0;
    text-align: center;    
    margin: 0px auto;
}

#section_bottom > * {
    padding: 1rem 0;
}*/


/*
    section:nth-child(2n+1) {
        background: #eeeeec;
    }
*/

section:last-of-type {
    padding: 4em 0;
}


.bgBlue {

    background: #2e3456;
    color:#ffffff;

}
.bgGrey {
    background: #eeeeec;
}

.columns {
    display: block;
    max-width: 1150px;
    /*margin: 0 auto;*/
    margin-top: 0px;
    /*margin-right: 10px;*/
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: center;
    padding-bottom: 0;
}

.col-2,
.col-3 {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    max-width: 360px;
    min-width: 240px;
    margin: 0.5em 3%;
}

.col-2 > *,
.col-3 > * {
    margin: 0.5rem auto;
}

.col-2 img,
.col-3 img {
    height: 52px;
    width: auto;
}

.col-3 {
    width: 31%;
    max-width: 300px;
    margin: 0.5em 1%;
}

/* default button style */
button.defaultstyle{
    display: block;
    margin: 0px;
    color: #fff;
    border: 1px solid #ffffff;
    background: #ffffff;
    text-align: center;
    font-weight: 100;
    cursor: pointer;
    padding: 0px;
    text-decoration: none;

}

/* branded button style */
button,
a.button {
    display: block;
    margin: 1rem auto 1.3rem;
    color: #fff;
    border: 1px solid #f0125d;
    background: #f0125d;
    text-align: center;
    font-weight: 100;
    cursor: pointer;
    /*padding: 0.6em 1.1em 0.7em;*/
    padding: 0.6em 3.5em 0.6em;
    text-decoration: none;
    /*    transition: all 0.25s;*/
}

button:hover,
a.button:hover,
button:focus,
a.button:focus {
    background: #c82e61;
    border: 1px solid #c82e61;
}

a.button {
    width: auto;
    max-width: 190px;
    position: relative;
}

button.alt,
a.button.alt {
    border: 1px solid #f0125d;
    background: #fff;
    color: #f0125d;
}

button.alt:hover,
a.button.alt:hover {
    background: #c82e61;
    border: 1px solid #c82e61;
    color: #fff;
}


#thank-you button,
#thank-you a.button {
    display: inline-block;
    vertical-align: top;
    margin: 0.3em;
}

.arrow-right {
    height: 1rem !important;
    width: auto !important;
    float: none !important; 
    margin: -0.2rem 0 0 0.9rem !important; 
}
.arrow-left {
    margin-top: .5rem !important;
}

#reset_apps{
    position: relative;
    background: #fff;
    color: #f0125d;
    padding-right: 2em;
    float: left;
}

#reset_apps.place_center{
    float: none;
}

#reset_apps:hover{
    background: #eee;
}

#reset_arrow_bg{
    position: absolute;
    left: 0;
    top: 0;
    background: #f0125d;
    height: 100%;
    width: 20%;
}


/* FORM STYLES */

label,
input[type="button"],

/*input[type="checkbox"],*/

input[type="color"]
/* no: ie,safari */

,
input[type="date"]
/* no: ie,firefox */

,
input[type="datetime-local"]
/* no: ie,safari */

,
input[type="email"]
/* no: safari */

,
input[type="file"],
input[type="hidden"],
input[type="image"],
input[list],
input[type="month"]
/* no: ie,firefox */

,
input[type="number"],
input[type="password"],
input[type="radio"],
input[type="range"],
input[type="reset"],
input[type="search"]
/* no: ie,firefox,opera */

,
select,
input[type="submit"],
input[type="tel"]
/* no: ALL */

,
input[type="text"],
input[type="time"]
/* no: ie,firefox */

,
input[type="url"]
/* no: safari */

,
input[type="week"]

/* no: ie,firefox */
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    border: none;
    /*    background: none;*/
    margin: 0.5em 0;
    font-size: 1em;
    line-height: 1.5em;
    /*    border-radius: 0;*/
    box-sizing: border-box;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

button,
input[type="checkbox"] {
    outline: none;
}

select::-webkit-calendar-picker-indicator,
input::-webkit-calendar-picker-indicator,
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}


/*
    input:hover {
        box-shadow: 0 0 0 1px #ffb5ce;
    }
    input:focus {
        box-shadow: 0 0 0 1px #ff94b8;
    }
*/

form {
    margin: 0;
    padding: 2em 1em;
    text-align: left;
    color: #ffffff;
    box-sizing: border-box;
}

form > input {
    color: #000;
}

form > select {
    color: #000;
}

label {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 0;
}

label:after {
    display: inline-block;
    position: absolute;
    content: '*';
    margin-left: 0.15em;
    color: red;
}
    label[for="state"]:after {
        content: none;
    }

input,
select {
    width: 100%;
    display: block;
    position: relative;
    background: #fff;
    padding: 0.4em 1em;
    border-radius: 2px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
}

select {
    background: #fff url(http://images.go.sage.com/EloquaImages/clients/SageGlobalInstance/%7b973304a1-79b8-4ad8-a074-b1dd8e16bee5%7d_select-arrow.png) 99% center no-repeat;
    background-size: 13px 7px;
}

blockquote {
    display: inline-block;
    padding: 1.5rem 0 0;
    margin: 0;
    font-size: 0.8em;
    
}

blockquote .big {
	font-size: 1.5rem;
	font-weight: 200;
	font-style: italic;
	color: #ca2a60;
	margin-bottom: 1rem;
}

input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    margin: 0.5em 0.5em 0.5em 0;
    width: auto;
}

label[for="consent"] {
    margin: 0;
    vertical-align: middle;
}

#submit-button:disabled {
    /*    box-shadow: 0 0 0 2px #555;*/
    background: #555;
    color: #fff;
}

.box-wrapper {}

.two-box {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 90%;
    max-width: 480px;
    margin: 1em;
    padding: 2.5em;
    box-sizing: border-box;
}

.two-box > * {
    padding: 0;
    text-align: left;
}

.two-box img {
    margin: 0 1em 0 0;
    height: 110px;
    width: auto;
    float: left;
}

.two-box > p {
    line-height: 1.2em;
}

.two-box a.button {
    display: inline-block;
    margin: 1em 0 0;
}

footer {
    width: 100%;
    padding: 0.9em 0;
    background: #555;
}

footer img {
    display: block;
    margin: 0 auto;
    height: 1.5em;
    width: auto;
}

@media (max-width:650px) {
    .col-2 {
        width: 80%;
        max-width: 400px;
    }
    .two-box {
        padding: 1em;
    }
}

@media (max-width:550px) {
    .two-box > * {
        float: none !important;
        display: block !important;
        margin: 1em auto !important;
        text-align: center !important;
    }
}




#social_media {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

#social_media li {
    display: inline-block;
}

#social_media img {
    height: 2rem;
    width: 2rem;
    margin: 0 0.1rem;
    opacity: 1;
    border-radius: 50%;
}

#social_media img:hover {
    opacity: 0.8;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.desktop_only {
    display: block;
}

@media (max-width: 767px) {
    .desktop_only {
        display: none;
    }
}

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}


/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}


/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: none;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}